<!doctype html>
<html lang="en">
  <head>
    <title>three.js webgl - GLTFloader</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />
    <link type="text/css" rel="stylesheet" href="{{css_file}}" />
  </head>

  <body>
    <div id="info">
      <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a>
      GLTFLoader<br />
      PYTHON/GDML/FLUKA/CAD geometry created by
      <a
        href="https://bitbucket.org/jairhul/pyg4ometry/src/develop/"
        target="_blank"
        rel="noopener"
        >pyg4ometry</a
      ><br />
    </div>

    <!-- Import maps polyfill -->
    <!-- Remove this when import maps will be widely supported -->
    <script
      async
      src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"
    ></script>
    <script type="importmap">
      {
        "imports": {
          "three": "./node_modules/three/build/three.module.js",
          "three/addons/": "./node_modules/three/examples/jsm/"
        }
      }
    </script>

    <script type="module">
      import * as THREE from "three";
      import { OrbitControls } from "three/addons/controls/OrbitControls.js";
      import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
      import { RGBELoader } from "three/addons/loaders/RGBELoader.js";

      let camera, scene, renderer;

      init();
      render();

      function init() {
        const container = document.createElement("div");
        document.body.appendChild(container);

        camera = new THREE.PerspectiveCamera(
          45,
          window.innerWidth / window.innerHeight,
          0.25,
          100,
        );
        camera.position.set(10, 10, 10);

        scene = new THREE.Scene();

        new RGBELoader()
          .setPath("./")
          .load("{{scene_hdr}}", function (texture) {
            texture.mapping = THREE.EquirectangularReflectionMapping;

            scene.background = texture;
            scene.environment = texture;

            render();

            // model
            const loader = new GLTFLoader().setPath("./");
            loader.load("{{model_gltf_file}}", function (gltf) {
              scene.add(gltf.scene);
              scene.rotation.set(0, 1.0, 0);
              render();
            });
          });

        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.toneMapping = THREE.ACESFilmicToneMapping;
        renderer.toneMappingExposure = 1;
        renderer.outputEncoding = THREE.sRGBEncoding;
        container.appendChild(renderer.domElement);

        const controls = new OrbitControls(camera, renderer.domElement);
        controls.addEventListener("change", render); // use if there is no animation loop
        controls.minDistance = 10;
        controls.maxDistance = 50;
        controls.target.set(0, 0, 0);
        controls.update();

        window.addEventListener("resize", onWindowResize);
      }

      function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);

        render();
      }

      //

      function render() {
        var viewPos = camera.position;
        console.log(viewPos);
        renderer.render(scene, camera);
      }
    </script>
  </body>
</html>
